<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row>
          <el-col style="text-align: right">
            <el-button
              type="success"
              size="mini"
              icon="el-icon-edit"
              >新增试题</el-button
            >
          </el-col>
        </el-row>
        <el-form label-width="70px" :model="form" ref="form">
          <el-row>
            <el-col :span="6">
              <el-form-item
                style="display: inline-block; width: 100%"
                label="学科"
              >
                <el-select
                  class="whidth"
                  size="mini"
                  v-model="form.subjectListValue"
                  placeholder="请选择"
                  @change="changeList"
                >
                  <el-option
                  v-for="item in subjectList1"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                style="display: inline-block; width: 100%"
                label="二级目录"
              >
                <el-select
                  class="whidth"
                  size="mini"
                  placeholder="请选择"
                  v-model="form.directorysValue"
                >
                  <el-option
                  v-for="item in directorys"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                style="display: inline-block; width: 100%"
                label="标签"
              >
                <el-select
                  class="whidth"
                  size="mini"
                  v-model="form.tagsValue"
                  placeholder="请选择"
                >
                  <el-option
                  v-for="item in tags"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                style="display: inline-block; width: 100%"
                label="关键字"
              >
                <el-input size="mini" class="whidth" v-model="form.keyWords"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item
                style="display: inline-block; width: 100%"
                label="试题类型"
              >
                <el-select
                  class="whidth"
                  size="mini"
                  v-model="form.difficultyValue"
                  placeholder="请选择"
                >
                  <el-option
                  v-for="item in difficultyList"
                  :key="item.id"
                  :value="item.value"
                  :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                style="display: inline-block; width: 100%"
                label="难度"
              >
                <el-select
                  class="whidth"
                  size="mini"
                  v-model="form.questionTypeValue"
                  placeholder="请选择"
                >
                  <el-option
                  v-for="item in questionTypeList"
                  :key="item.id"
                  :value="item.value"
                  :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                style="display: inline-block; width: 100%"
                label="方向"
              >
                <el-select
                  class="whidth"
                  size="mini"
                  v-model="form.directionValue"
                  placeholder="请选择"
                >
                  <el-option
                  v-for="item in directionList"
                  :key="item"
                  :label="item"
                  :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                style="display: inline-block; width: 100%"
                label="录入人"
              >
                <el-select
                  class="whidth"
                  size="mini"
                  v-model="form.usersSimpleListValue"
                  placeholder="请选择"
                >
                  <el-option
                  v-for="item in usersSimpleList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.username"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item
                style="display: inline-block; width: 100%"
                label="题目备注"
              >
                <el-input size="mini" class="whidth" v-model="form.titleNotes"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                style="display: inline-block; width: 100%"
                label="企业简称"
              >
                <el-input size="mini" class="whidth" v-model="form.enterpriseAbbreviation"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                style="display: inline-block; width: 100%"
                label="城市"
              >
                <el-select
                  style="width: 39%; margin-right: 7px"
                  size="mini"
                  placeholder="请选择"
                  v-model="form.provincesValue"
                  @change="getCitys"
                >
                  <el-option
                  v-for="item in provincesList"
                  :key="item.id"
                  :label="item"
                  :value="item"
                  ></el-option>
                </el-select>
                <el-select
                  style="width: 39%"
                  size="mini"
                  placeholder="请选择"
                  v-model="form.cityValue"
                >
                  <el-option
                  v-for="item in cityList"
                  :key="item.id"
                  :value="item"
                  :label="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                style="display: inline-block; width: 83%; text-align: right"
              >
                <el-button size="mini" @click="clear">清除</el-button>
                <el-button type="primary" size="mini" @click="submit">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- --------------选择卡样式--------------- -->
        <el-tabs type="card"  @tab-click="handleClick">
          <el-tab-pane label="全部" name="first"></el-tab-pane>
          <el-tab-pane label="待审核" name="second"></el-tab-pane>
          <el-tab-pane label="已审核" name="third"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
          <el-alert
            :title="total"
            type="info"
            show-icon
            :closable="false"
            style="margin-bottom: 20px;"
            >
            </el-alert>
        </el-tabs>
        <questionsChoice :tableDataList="tableDataList"  @updataShvalue = "updataShvalue" ></questionsChoice>
        <el-row type="flex" justify="end">
          <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="data.total" :current-page="data.page" :page-size="data.pagesize" @current-change="handlerChangePage" :page-sizes="[5, 10, 20, 30]" @size-change="handleSizeChange">
        </el-pagination>
        </el-row>
      </el-card>
    </div>

  </div>
</template>

<script>
// import { provinces } from '@/api/hmmm/citys'
import { choice } from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects'
import { simple as simpleTags } from '@/api/hmmm/tags'
import { simple as simpleDirectorys } from '@/api/hmmm/directorys'
import { simple as usersSimple } from '@/api/base/users'
import questionsChoice from './questionsChoice.vue'
import { difficulty, questionType, direction, publishType } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
export default {
  data () {
    return {
      tableDataList: [],
      chkState: 0,
      chkState1: 1,
      chkState2: 2,
      data: {
        total: 0,
        page: 1,
        pagesize: 5
      },
      subjectList1: '',
      directorys: '',
      tags: '',
      usersSimpleList: '',
      difficultyList: [],
      questionTypeList: [],
      directionList: [],
      provincesList: [],
      cityList: [],
      publishState: [],
      form: {
        subjectListValue: '', // 学科信息value
        directorysValue: '', // 二级目录value
        usersSimpleListValue: '', // 收录人value
        difficultyValue: '', // 题型value
        questionTypeValue: '', // 难度value
        directionValue: '', // 方向value
        provincesValue: '', // 城市value
        cityValue: '', // 地区value
        enterpriseAbbreviation: '', // 企业简称
        keyWords: '', // 关键字
        tagsValue: '', // 标签
        titleNotes: '' // 题目备注
      }
    }
  },
  computed: {
    total () {
      return `数据一共${this.data.total}条`
    }
  },
  components: {
    questionsChoice
  },
  created () {
    this.getChoice()
    this.subjectList()
    this.usersSimple()
    this.difficultyList = difficulty
    this.questionTypeList = questionType
    this.directionList = direction
    this.publishState = publishType
    this.getprovinces()
  },
  methods: {
    async getChoice () {
      const res = await choice(this.data)
      this.tableDataList = res.data.items
      this.data.total = res.data.counts
      this.tableDataList.forEach((item) => {
        item.question = this.removeTags(item.question)
        // 审核状态
        if (item.chkState === 1) {
          item.chkState = '已审核'
        } else if (item.chkState === 0) {
          item.chkState = '待审核'
        } else {
          item.chkState = '已拒绝'
        }
        // 学科
        if (item.difficulty === '1') {
          item.difficulty = '简单'
        } else if (item.difficulty === '2') {
          item.difficulty = '一般'
        } else {
          item.difficulty = '困难'
        }
        // 题型
        if (item.questionType === '1') {
          item.questionType = '单选'
        } else if (item.questionType === '2') {
          item.questionType = '多选'
        } else {
          item.questionType = '简答'
        }
        if (item.chkState === '已审核') {
          item.publishState = '已发布'
        } else if (item.chkState === '已拒绝') {
          item.publishState = '待发布'
        } else {
          item.publishState = '待发布'
        }
      })
    },
    removeTags (html) {
      return html.replace(/<[^>]+>/g, '')
    },
    async handleClick (type) {
      if (type.name === 'second') {
        const res = await choice({
          page: this.page,
          pagesize: this.pagesize,
          chkState: this.chkState
        })
        this.data.total = res.data.counts
        this.tableDataList = res.data.items
        this.tableDataList.forEach((item) => {
          item.question = this.removeTags(item.question)
          // 审核状态
          if (item.chkState === 1) {
            item.chkState = '通过'
          } else if (item.chkState === 0) {
            item.chkState = '待审核'
          } else {
            item.chkState = '已拒绝'
          }
          // 学科
          if (item.difficulty === '1') {
            item.difficulty = '简单'
          } else if (item.difficulty === '2') {
            item.difficulty = '一般'
          } else {
            item.difficulty = '困难'
          }
          // 题型
          if (item.questionType === '1') {
            item.questionType = '单选'
          } else if (item.questionType === '2') {
            item.questionType = '多选'
          } else {
            item.questionType = '简答'
          }
        })
      } else if (type.name === 'third') {
        const res = await choice({
          page: this.page,
          pagesize: this.pagesize,
          chkState: this.chkState1
        })
        this.data.total = res.data.counts
        this.tableDataList = res.data.items
        this.tableDataList.forEach((item) => {
          item.question = this.removeTags(item.question)
          // 审核状态
          if (item.chkState === 1) {
            item.chkState = '通过'
          } else if (item.chkState === 0) {
            item.chkState = '待审核'
          } else {
            item.chkState = '已拒绝'
          }
          // 学科
          if (item.difficulty === '1') {
            item.difficulty = '简单'
          } else if (item.difficulty === '2') {
            item.difficulty = '一般'
          } else {
            item.difficulty = '困难'
          }
          // 题型
          if (item.questionType === '1') {
            item.questionType = '单选'
          } else if (item.questionType === '2') {
            item.questionType = '多选'
          } else {
            item.questionType = '简答'
          }
        })
      } else if (type.name === 'fourth') {
        const res = await choice({
          page: this.page,
          pagesize: this.pagesize,
          chkState: this.chkState2
        })
        this.data.total = res.data.counts
        this.tableDataList = res.data.items
        this.tableDataList.forEach((item) => {
          item.question = this.removeTags(item.question)
          // 审核状态
          if (item.chkState === 1) {
            item.chkState = '通过'
          } else if (item.chkState === 0) {
            item.chkState = '待审核'
          } else {
            item.chkState = '已拒绝'
          }
          // 学科
          if (item.difficulty === '1') {
            item.difficulty = '简单'
          } else if (item.difficulty === '2') {
            item.difficulty = '一般'
          } else {
            item.difficulty = '困难'
          }
          // 题型
          if (item.questionType === '1') {
            item.questionType = '单选'
          } else if (item.questionType === '2') {
            item.questionType = '多选'
          } else {
            item.questionType = '简答'
          }
        })
      } else {
        this.getChoice()
      }
    },
    async subjectList () {
      const res = await simple()
      this.subjectList1 = res.data
    },
    async changeList () {
      const data = await simpleDirectorys({ subjectID: this.form.subjectListValue })
      const res = await simpleTags({ subjectID: this.form.subjectListValue })
      this.directorys = data.data
      this.tags = res.data
    },
    async usersSimple () {
      const res = await usersSimple()
      this.usersSimpleList = res.data
    },
    async getprovinces () {
      const res = await provinces()
      this.provincesList = res
    },
    async getCitys (params) {
      const res = await citys(params)
      this.cityList = res
    },
    submit () {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        await choice(this.form)
        this.tableDataList = this.tableDataList.filter(item => item.question.includes(this.form.keyWords))
      })
    },
    clear () {
      this.form = {}
      this.getChoice()
    },
    updataShvalue () {
      this.getChoice()
    },
    handlerChangePage (value) {
      this.data.page = value
      this.getChoice()
    },
    handleSizeChange (value) {
      this.data.pagesize = value
      this.getChoice()
    },
    changeChk () {
      this.getChoice()
    }
  }
}
</script>

<style scoped lang="scss">
</style>
